<template>
  <div class="app-container">
    <div class="top-filter">
      <el-button type="primary" @click="handleAdd" size="lg">添加工人</el-button>
      <el-button type="secondary" @click="handleBatch">批量发起合同</el-button>
    </div>

    <my-data-table  status="" @selection-change="handleSelectionChange" ref="dataTable">
      <el-table-column slot="first-column" type="selection" fixed width="55"> </el-table-column>
      <el-table-column align="center" label="操作" width="200" slot="operator">
        <template slot-scope="scope">
          <el-button type="text" class="btn" @click="handleSingStartContract(scope.row)" style="margin-right: 8px"
            >发起合同</el-button
          >

          <el-popconfirm title="确定离职该工人吗？" @confirm="handleRemove(scope.row.id)">
            <el-button type="text" slot="reference" style="margin-right: 8px">离职</el-button>
          </el-popconfirm>
          <el-button type="text" @click="handleEdit(scope.row.id)">编辑</el-button>
        </template>
      </el-table-column>
    </my-data-table>
    <el-dialog
      :title="formType === 'EDIT' ? '修改' : '添加'"
      :visible.sync="showForm"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <edit-form
        :formType="formType"
        @form-submit="handleSubmit"
        @form-hide="handleClose"
        :defaultFormData="formData"
        :loading="submitLoading"
      ></edit-form>
    </el-dialog>
    <batch-start-pop
      ref="contractPop"
      :visible="batchPop"
      :list="selection"
      @batchSuccess="handleBatchSuccess"
      @batchHide="handleBatchHide"
    ></batch-start-pop>
    <el-dialog title="工人添加成功" :visible.sync="successPop" :close-on-click-modal="false">
      <p>“{{ successAddData.name }}”已成功添加到系统，请尽快发起劳动合同签署</p>
      <div slot="footer">
        <el-button type="primary" @click="handleStartContract">发起合同</el-button>
        <el-button @click="handleAdd">继续添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { update } from '@common/api/worker';
import { Message } from 'element-ui';
import EditForm from './components/editForm.vue';
import BatchStartPop from './components/batchStartContract.vue';

import MyDataTable from './components/table.vue';

export default {
  components: { EditForm, BatchStartPop, MyDataTable },
  data() {
    return {
      showForm: false, // 是否显示表单弹窗
      formType: '', // 表单类型
      formData: {}, // 编辑/新增表单数据
      batchPop: false, // 批量发起弹窗
      submitLoading: false, // 表单提交loading
      selection: [],
      successPop: false, // 添加成功弹窗
      successAddData: {},
    };
  },


  methods: {

    // 添加员工
    handleAdd() {
      this.showForm = true;
      this.formType = 'NEW';
      this.formData = {};
      this.successAddData = {};
      this.successPop = false;
    },
    handleStartContract() {
      this.selection = [this.successAddData];
      this.successPop = false;
      this.formType = {};
      this.batchPop = true;
    },
    // 单个合同发起
    handleSingStartContract(data) {
      this.selection = [data];
      this.batchPop = true;
    },
    // 批量发起合同
    handleBatch() {
      if (!this.selection.length) {
        return Message({
          type: 'warning',
          message: '请先选择人员',
          duration: 5 * 1000,
        });
      }
      this.batchPop = true;
    },
    handleBatchSuccess() {
      this.batchPop = false;
      this.selection = [];
    },
    handleBatchHide() {
      this.batchPop = false;
      this.selection = [];
    },
    handleSelectionChange(val) {
      this.selection = val;
    },
    async handleRemove(Id) {
      const res = await update({ id: Id, status: 'QUIT_JOB' });
      if (res?.data?.Id) {
        Message({
          message: '工人离职成功',
          type: 'success',
          duration: 5 * 1000,
        });
        this.$refs.dataTable.onReset();
      }
    },
    // 编辑弹窗
    async handleEdit(id) {
      this.showForm = true;
      this.formType = 'EDIT';
      const worker = this.$refs.dataTable.list.find(v => v.id === id);
      this.formData = { ...worker };
    },
    // 提交
    async handleSubmit(formData) {
      if (this.formType === 'NEW') {
        this.successPop = true;
        this.successAddData = formData;
        this.$refs.dataTable.onReset();
      } else {
        this.updataListItem(formData);
      }
      this.showForm = false;
      this.formType = '';
    },
    // 更新列表中的工人信息
    updataListItem(workerData) {
      const idx = this.$refs.dataTable.list.findIndex(v => v.id === workerData.id);
      const tmp = this.$refs.dataTable.list[idx];
      this.$refs.dataTable.$set(this.$refs.dataTable.list, idx, {
        ...tmp,
        ...workerData,
      });
    },
    handleClose() {
      this.showForm = false;
      this.formType = '';
    },
    handleSuccessClose() {
      this.successAddData = {};
      this.successPop = false;
      this.batchPop = false;
      this.$refs.dataTable.onReset();
    },
  },
};
</script>
<style scoped>
.top-filter {
  margin-bottom: 20px;
}
</style>
